/*
 * Copyright 2019 Red Hat, Inc. and/or its affiliates.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

[data-i18n-prefix="DataTypeConstraintRangeView."] {

  .time-picker {
    z-index: 2;
  }

  .checkbox-container {
    padding-top: 10px;
  }

  .col-md-6,
  .col-md-12 {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 1;
  }

  .input-field {
    display: inline-block;
    width: 160px;
    margin-bottom: 5px;
  }

  .btn.dropdown-toggle.btn-default {
    width: 183px;
  }

  hr {
    margin: 10px 0;
  }

  .tip {
    opacity: .75;
    font-size: .85em;
    margin-bottom: 7px;
  }

  .tips {
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 0;
  }

  .controls-container {
    width: 225px;
    margin: 0 auto;
    padding-top: 5px;
  }

  .date-input-field {
    width: 200px;
  }

  .range-value-box {
    min-width: 230px;
    float: left;
    margin: 10px 10px -5px;
  }

  &.kie-years-and-months-duration {
    .range-value-box {
      width: 230px;
    }
  }

  &.kie-days-and-time-duration {

    .range-value-box {
      min-width: 495px;;
      margin: 10px;

      .checkbox-container {
        vertical-align: top;
        padding: 0;
        margin: 2px 0 0 5px;
      }

      .checkbox-container,
      [data-field="end-value-container"],
      [data-field="start-value-container"] {
        display: inline-block;
      }
    }
  }

  &.kie-date-and-time {

    .range-value-box {
      margin: 10px;

      [data-field="end-value-container"],
      [data-field="start-value-container"] {
        display: inline-block;
        width: 400px;
      }
    }
  }

  input.time-input-field {
    width: 210px;
    margin-top: -5px;
  }

  .btn-toggle-timezone {
    margin-left: 0;
    display: inline-block;
  }

  .dropdown-toggle {
    width: 160px;
  }

  .btn-group {
    width: 160px;
  }

  .bootstrap-select.form-control:not([class*=col-]) {
    width: 160px;
    margin-top: -5px;
    margin-left: -2px;
  }
}
